<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XML数据请求</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
    <script type="text/javascript">
        let xmlDoc_1, xmlDoc_2;

        function init() {
            let object_1 = new XMLHttpRequest();
            object_1.open("get", "./../asset/person1.xml", false);
            object_1.send();
            xmlDoc_1 = object_1.responseXML;

            let object_2 = new XMLHttpRequest();
            object_2.open("get", "./../asset/person2.xml", false);
            object_2.send();
            xmlDoc_2 = object_2.responseXML;
            console.log(xmlDoc_2.getElementsByTagName("person")[1])
        }
    </script>
</head>
<body onload="init()">
<h1>点击按钮请求XML数据</h1>
<h2>person1.xml的XML文本信息如下：</h2>
<b>标题：</b><span id="title_1"></span><br>
<b>姓名：</b><span id="name_1"></span><br>
<b>头衔：</b><span id="principal_1"></span><br>
<b>成就：</b><span id="achievement_1"></span><br>
<b>简述：</b><span id="brief_description_1"></span><br>
<button type="button" onclick="function_1()">读取XML文本内容</button>
<hr>
<h1>点击按钮请求XML数据</h1>
<h2>person2.xml的XML文本信息如下：</h2>
<b>标题：</b><span id="title_2"></span><br>
<b>姓名：</b><span id="name_2"></span><br>
<b>头衔：</b><span id="principal_2"></span><br>
<b>成就：</b><span id="achievement_2"></span><br>
<b>简述：</b><span id="brief_description_2"></span><br>
<button type="button" onclick="function_2()">读取XML文本内容</button>
<script type="text/javascript">
    function function_1() {
        document.getElementById("title_1").innerHTML = xmlDoc_1.getElementsByTagName("title")[0].innerHTML;
        document.getElementById("name_1").innerHTML = xmlDoc_1.getElementsByTagName("name")[0].innerHTML;
        document.getElementById("principal_1").innerHTML = xmlDoc_1.getElementsByTagName("principal")[0].innerHTML;
        document.getElementById("achievement_1").innerHTML = xmlDoc_1.getElementsByTagName("achievement")[0].innerHTML;
        document.getElementById("brief_description_1").innerHTML = xmlDoc_1.getElementsByTagName("brief_description")[0].innerHTML;
    }

    function function_2() {
        document.getElementById("title_2").innerHTML = xmlDoc_2.getElementsByTagName("person")[1].getAttribute("title");
        document.getElementById("name_2").innerHTML = xmlDoc_2.getElementsByTagName("person")[1].getAttribute("name");
        document.getElementById("principal_2").innerHTML = xmlDoc_2.getElementsByTagName("person")[1].getAttribute("principal");
        document.getElementById("achievement_2").innerHTML = xmlDoc_2.getElementsByTagName("person")[1].getAttribute("achievement");
        document.getElementById("brief_description_2").innerHTML = xmlDoc_2.getElementsByTagName("person")[1].getAttribute("brief_description");
    }
</script>
</body>
</html>